import React, { useState } from 'react';
    import { Link, useNavigate, useLocation } from 'react-router-dom';
    import { useAuth } from '../../hooks/useAuth';
    import routes from '../../router/routeConfig';
    import './index.css';

    const LoginPage = () => {
      const [email, setEmail] = useState('');
      const [password, setPassword] = useState('');
      const [error, setError] = useState('');
      const [isLoading, setIsLoading] = useState(false);
      
      const { login } = useAuth();
      const navigate = useNavigate();
      const location = useLocation();
      
      // 获取重定向URL（如果有）
      const queryParams = new URLSearchParams(location.search);
      const redirectUrl = queryParams.get('redirect') || routes.home;

      const handleSubmit = async (e) => {
        e.preventDefault();
        
        if (!email || !password) {
          setError('请填写所有必填字段');
          return;
        }
        
        setIsLoading(true);
        setError('');
        
        try {
          const result = await login(email, password);
          
          if (result.success) {
            // 登录成功，重定向到之前的页面或首页
            navigate(redirectUrl);
          } else {
            setError(result.error || '登录失败，请检查您的凭据');
          }
        } catch (err) {
          setError('登录过程中发生错误，请重试');
          console.error('登录错误:', err);
        } finally {
          setIsLoading(false);
        }
      };

      return (
        <div className="container auth-page">
          <div className="auth-card">
            <div className="auth-header">
              <h1><i className="fas fa-sign-in-alt"></i> 登录</h1>
              <p>登录您的知识库系统账户</p>
            </div>
            
            {error && (
              <div className="auth-error">
                <i className="fas fa-exclamation-circle"></i> {error}
              </div>
            )}
            
            <form onSubmit={handleSubmit} className="auth-form">
              <div className="form-group">
                <label htmlFor="email">电子邮箱</label>
                <div className="input-with-icon">
                  <i className="fas fa-envelope"></i>
                  <input
                    type="email"
                    id="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="请输入您的电子邮箱"
                    required
                  />
                </div>
              </div>
              
              <div className="form-group">
                <label htmlFor="password">密码</label>
                <div className="input-with-icon">
                  <i className="fas fa-lock"></i>
                  <input
                    type="password"
                    id="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    placeholder="请输入您的密码"
                    required
                  />
                </div>
              </div>
              
              <div className="form-options">
                <div className="remember-me">
                  <input type="checkbox" id="remember" />
                  <label htmlFor="remember">记住我</label>
                </div>
                <Link to={routes.forgotPassword} className="forgot-password">
                  忘记密码？
                </Link>
              </div>
              
              <button 
                type="submit" 
                className="auth-button" 
                disabled={isLoading}
              >
                {isLoading ? (
                  <>
                    <i className="fas fa-spinner fa-spin"></i> 登录中...
                  </>
                ) : (
                  <>
                    <i className="fas fa-sign-in-alt"></i> 登录
                  </>
                )}
              </button>
            </form>
            
            <div className="auth-footer">
              <p>
                还没有账户？ <Link to={routes.register}>立即注册</Link>
              </p>
              <p>
                <Link to={routes.home} className="back-to-home">
                  <i className="fas fa-arrow-left"></i> 返回首页
                </Link>
              </p>
            </div>
          </div>
        </div>
      );
    };

    export default LoginPage;
